<template>
<!-- 房屋信息 -->
    <div class="OwnerInformation">
        <div class="OwnerInformationheader">
            <p>
                <i class="el-icon-arrow-left"></i>
                <span>房屋信息</span>
            </p>
        </div>
        <div class="OwnerInformationcontent">
            <ul class="baseinformation">
                <li>
                    <div class="title">
                        所属小区
                    </div>
                    <div class="contenct">
                        {{this.Belongingcommunity}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        单元
                    </div>
                    <div class="contenct">
                        {{this.unit}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        房间号
                    </div>
                    <div class="contenct">
                        {{this.RoomNo}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        建筑面积
                    </div>
                    <div class="contenct">
                        {{this.buildingarea}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        公摊面积
                    </div>
                    <div class="contenct">
                        {{this.Sharedarea}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        储藏室
                    </div>
                    <div class="contenct">
                        {{this.storeroom}}
                    </div>
                </li><li>
                    <div class="title">
                        车位号
                    </div>
                    <div class="contenct">
                        {{this.ParkingNumber}}
                    </div>
                </li>
            </ul>
            <ul class="baseinformation">
                <li>
                    <div class="title">
                        楼宇名称
                    </div>
                    <div class="contenct">
                        {{this.Buildingname}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        楼层
                    </div>
                    <div class="contenct">
                        {{this.floor}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        房屋类型
                    </div>
                    <div class="contenct">
                        {{this.houseingtype}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        使用面积
                    </div>
                    <div class="contenct">
                        {{this.usablearea}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        房屋户型
                    </div>
                    <div class="contenct">
                        {{this.Houselayout}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        房屋朝向
                    </div>
                    <div class="contenct">
                        {{this.Houseorientation}}
                    </div>
                </li><li>
                    <div class="title">
                    </div>
                    <div class="contenct">
                    </div>
                </li>
            </ul>
        </div>

    </div>
</template>

<script>
export default {
    data(){
        return{
            Belongingcommunity:' 万象城 ',
            unit:'1单元',
            RoomNo:'1202',
            buildingarea:' 150㎡ ',
            Sharedarea:'150㎡',
            storeroom:' B1-202 ',
            ParkingNumber:' C-201 ',
            Buildingname:' 1号楼 ',
            floor:12,
            houseingtype:' 住宅 ',
            usablearea:' 140㎡ ',
            Houselayout:' 4室2厅2卫 ',
            Houseorientation:' 南北 '
        }
    },
    mounted(){
        this.$axios.post('http://127.0.0.1/housinginfomation',{
            owner_id:this.$route.query.data.owner_id,
            date:this.$route.query.data.date
        }).then(res=>{
            this.Belongingcommunity=res.data.data[0].Belongingcommunity
            this.unit=res.data.data[0].Numberofunits
            this.RoomNo=res.data.data[0].RoomNo
            this.buildingarea=res.data.data[0].buildingarea
            this.Sharedarea=res.data.data[0].Sharedarea
            this.storeroom=res.data.data[0].StorageRoom
            this.ParkingNumber=res.data.data[0].parkinglot
            this.Buildingname=res.data.data[0].Buildingname
            this.floor=res.data.data[0].floor
            this.houseingtype=res.data.data[0].Housetype
            this.usablearea=res.data.data[0].usablearea
            this.Houselayout=res.data.data[0].room==null?'':res.data.data[0].room+'室'+res.data.data[0].office+'厅'+res.data.data[0].wash
        }).catch(err=>{
            console.log(err)
        })
    }
}
</script>

<style lang="scss" scoped>
    .OwnerInformation{
        width: 100%;
        padding: 10px 30px 30px;
        .OwnerInformationheader{
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #666;
            font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
            font-weight: 700;
            .el-icon-arrow-left{
                margin-right: 5px;
                color: #666 !important;
                font-weight: 700 !important;
            }
            .el-icon-arrow-lefts{
                color: #FF3B30;
            }
        }
        .OwnerInformationcontent{
            width: 100%;
            display: flex;
            .baseinformation{
                width: 600px;
                li{
                    display: flex;
                    align-items: center;
                    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
                    font-weight: 700;
                    font-style: normal;
                    font-size: 12px;
                    color: #666666;
                    .title{
                        width: 120px;
                        height: 40px;
                        line-height: 40px;
                        text-align: right;
                        padding-right: 20px;
                        background-color: #f5f5f5;
                        border: 1px solid rgb(233, 233, 233);
                        box-sizing: border-box;
                    }
                    .contenct{
                        width: 480px;
                        height: 40px;
                        line-height: 40px;
                        padding-left: 20px;
                        font-weight: 400;
                        box-sizing: border-box;
                        border: 1px solid rgb(233, 233, 233);
                    }
                }
            }
        }
    }
</style>